<template>
    <div class="Order">
        <div style="position: fixed;z-index: 999; left: 0;right: 0;top: 0.88rem;">
            <tabs :items="items" :default="defaultValue" @tabClick="tabClick"/>
        </div>
        <order0 v-if="type == 0"/>
        <order1 v-if="type == 1"/>
        <order2 v-if="type == 2"/>
        <order3 v-if="type == 3"/>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {NAV_BAR_INFO} from "@/store/MutationTypes";
import Tabs from "@/components/Tabs.vue";
import Order0 from "@/views/order/component/Order0.vue";
import Order1 from "@/views/order/component/Order1.vue";
import Order2 from "@/views/order/component/Order2.vue";
import Order3 from "@/views/order/component/Order3.vue";


/**
 * Order0 购买订单列表
 * Item0 购买订单
 *
 * Order1 出售订单列表
 * Item1 出售订单
 *
 * Order2 我要买列表
 * Item2 我要买订单
 *
 * Order3 我要卖列表
 * Item3 我要卖订单
 *
 */

@Component({
    name: 'Order',
    components: {Order3, Order2, Order1, Order0, Tabs}
})
export default class extends Vue {
    // 选项卡数据源
    private items: any[] = [
        {title: '购买订单', key: 0},
        {title: '出售订单', key: 1},
        {title: '我要买', key: 2},
        {title: '我要卖', key: 3},
    ];
    private mounted(): void {
        let __this = this;
        this.$common.scrollToTop();
        this.$store.dispatch(NAV_BAR_INFO, {
            leftItem: {name: '首页', click: () => {
                __this.$router.push('/home');
                }}
        });
    }
    // 路由参数(用于设置默认订单类型和 选项卡默认值)
    private get type(): any {
        return this.$route.query.type;
    }
    // 选项卡默认值
    private get defaultValue(): number {
        if (this.type === '0') {
            return 0;
        } else if (this.type === '1') {
            return 1;
        } else if (this.type === '2') {
            return 2;
        } else if (this.type === '3') {
            return 3;
        } else {
            return 0;
        }
    }

    /**
     * 选项卡切换
     * @param item
     */
    private tabClick(item: any): void {
        this.$router.push('/order?type=' + item.key)
    }
}
</script>

<style scoped lang="less">
.Order {
    /*position: relative;*/
    padding-top: 0.85rem;
}
</style>
